<template>
	<view class="wrap">
		<view class="searchInput"><u-search placeholder="请输入您要搜索的内容" v-model="isSearchName" :animation="true"></u-search></view>
		<view class="swiperImages"><swiper :swiperList="swiperList" @clickSwiper="swiperResult"></swiper></view>
		<view class="homeBody">
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item, index) in homeIconList" :key="index"><view class="grid-text" :style="{ backgroundImage: `url(${item.homeIconUrl})` }">占位中</view></u-grid-item>
			</u-grid>
		</view>
		<view><Footer></Footer></view>
	</view>
</template>

<script>
import swiper from '../../components/swiper/swiper.vue';
import footer from '../../components/footer/footer.vue';
export default {
	components: {
		swiper,
		footer
	},
	data() {
		return {
			isSearchName: '',
			// 轮播控制器
			swiperList: [],
			swiper: '',
			homeIconList: []
		};
	},
	onLoad() {
		
	},
	created() {
		this.getSwiperImages();
		// this.loginByWeiXin();
	},
	methods: {
		// 获取轮播图片
		getSwiperImages() {
			const db = uniCloud.database();
			const that = this;
			// 使用`jql`查询list表内`name`字段值为`hello-uni-app`的记录
			db.collection('swiperImagesUrl')
				.where('show == true')
				.get()
				.then(res => {
					// res 为数据库查询结果
					// console.log(res);
					res.result.data.forEach(item => {
						if (item.swiperImagesUrl) {
							that.swiperList.push(item);
						} else {
							that.homeIconList.push(item);
						}
					});
					that.swiperShow = true;
				})
				.catch(err => {
					// err.message 错误信息
					that.swiperShow = false;
					console.log(err);
					// err.code 错误码
				});
		},
		swiperResult(msg) {
			this.swiper = msg.detail.__args__[0];
		},
		loginByWeiXin() {
			wx.login({
				success(res) {
					// promise方式
					if (res.code) {
						uniCloud
							.callFunction({
								name: 'login-by-weixin',
								data: { code: res.code }
							})
							.then(res => {
								console.log(res);
							});
					} else {
						console.log('登录失败！' + res.errMsg);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	height: 100%;
}
.searchInput {
	width: 100%;
	height: 80rpx;
}
.grid-text {
	width: 200rpx;
	height: 200rpx;
	background-size: cover;
	font-size: 28rpx;
	margin-top: 4rpx;
	color: $u-type-info;
}
.swiperImages {
	height: 400rpx;
}
</style>
